<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*标签选择器 选择器作用:选择对应标签，为之添加样式*/

        div{
            color: orange;



        }
        p{
            color: purple;

        }

    /*.类名 类选择器*/
    .one{
        color: mediumseagreen;
    }
        /*id选择器 类选择器 id是唯一的*/
        #first{
           font-size: 14px;
        }

        /*并列选择器逻辑或 只要满足其中一个条件就可以*/

        /*复合选择器逻辑与 只要满足其中一个条件就可以*/
        /*后代选择器*/
        #test2 div {
        color: #b3121c;
         /*直接后代选择器*/

        }

    </style>
</head>
<body>

    <div id="first">11111111</div>
    <div>11111111</div>
    <div>11111111</div>
    <div>11111111</div>

    <p>22222222</p>
        <div id="test2">
            <p>
                <div class="test1">
                    divdivdivdiv
                </div>
            </p>
        </div>

    <div class="one">333333333</div>
    <p>44444444</p>

</body>
</html>